<template>
	<!-- :style="{ paddingTop: setmargintop() + 'px' }" -->
	<view>
		<!-- 导航栏 -->
		<view id="bar">
			<uni-nav-bar title="农情监测" class="navBar" background-color="#6e9aff" color="#fff" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft">
			</uni-nav-bar>
		</view>
		<view class="tab1" v-if="companyMask">
			<image src="@/static/index-message/switch3.png" mode="" class="img"></image>
			<picker mode=selector @change="selectRoles" range-key="name"
				:value="rolesStatus" :range="rolesList">
				{{rolesName}}
			</picker>
		</view>
		<!-- tab栏 -->
		<view class="tab">
			<scroll-view class="select-top-bar" :scroll-x="true">
				<view class="flex">
					<view v-for="(selectviewitem,selectviewindex) in selectviewlist" :key="selectviewindex"
						@click="selectviewmet(selectviewindex)" class="select-top-bar-item">
						<view class="top-bar-image">
							<image class="top-bar-image-sty"
								:src="selectviewindex === nowselectviewindex?selectviewitem.imgurl:selectviewitem.imgurlnoselect"
								mode="scaleToFill"></image>
						</view>
						<view class="top-bar-item-title">{{selectviewitem.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 主体 -->
		<view class="contain">
			<view class="bg"></view>
			<!-- search -->
			<view class="contain-view">
				<view v-if="nowselectviewindex === 0">
					<view class="searchs">
						<view class="search">
							<view class="testop">
								<view class="buttime">
									<view class="center">
										<image src="@/static/socialized-service/breed/guanjian.png" mode="aspectFit">
										</image>
										<uni-easyinput class="uni-mt-5" v-model="searchName" :inputBorder="false"
											style="width: 100%;" placeholder="请输入设施/设备名称"></uni-easyinput>
									</view>
								</view>
							</view>
							<view class="btn" @click="goSearch">搜索</view>
						</view>
					</view>
					<scroll-view scroll-y="true" :style="{height:setcollapseheight() + 'px'}"
						:scroll-top="scrollTop" @scroll="onScroll">
						<view class="agr-view">
							<view class="agr-title">
								<!-- 物联设备 -->
								设备
							</view>
							<view class="agr-box">
								<view class="agr-one" v-for="(item,index) in facilityGroupList" :key="index"
									@click="clickChart(item)">
									<view class="right">
										<view class="title">
											<image class="icon" src="@/static/agricultural/wulianwang.png"
												mode="heightFix"></image>
											<view class="title-txt">{{ item.deviceName }}</view>
										</view>
										<view class="address">
											<view>安装位置：{{ item.address || '' }}</view>
											<view>安装距离：{{item.distance || ''}}</view>
										</view>
									</view>
								</view>
								<view v-if="!facilityGroupList.length" class="noData">
									暂无数据
								</view>
								<!-- <uni-collapse>
									<uni-collapse-item v-for="(item,index) in facilityGroupList" show-animation :key="index"
										:open="true">
										<template v-slot:title>
											<view class="fac-title-sty"
												@click="clicktitle(item.facilityGroupName,item.facilityGroupNo)">
												{{item.facilityGroupName}}
											</view>
										</template>
										<view class="facility-view-item" v-for="(ass,assindex) in item.facilityList" :key="assindex"
											@click="clickFacilty(ass)">
											{{ ass.facilityName }}
										</view>
									</uni-collapse-item>
								</uni-collapse> -->
							</view>
							<view class="more" @click="queryMore" v-show="this.page < this.totalPages">
								点击查看更多设备<u-icon name="arrow-right-double" color="#2165FF" size="28"></u-icon>
							</view>
							<view class="agr-title">
								气象设备
							</view>
							<view class="agr-box">
								<view class="agr-one" v-for="(item,index) in dataList" :key="index"
									@click="clickChart(item)">
									<view class="right">
										<view class="title">
											<image class="icon" src="@/static/agricultural/qixiangzhan.png"
												mode="heightFix"></image>
											<view class="title-txt">{{ item.deviceName }}</view>
										</view>
										<view class="address">安装位置：{{ item.address }}</view>
									</view>
								</view>
								<view v-if="!dataList.length" class="noData">
									暂无数据
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-else>
					<pestDistinguish></pestDistinguish>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import agriculturalApi from '@/api/socialized-servce/agricultural-information/index.js'
	import pestDistinguish from './component/pest-distinguish/pest-distinguish.vue'

	export default {
		components: {
			pestDistinguish
		},
		data() {
			return {
				selected: 0,
				scrollTop: 0,
				oldScrollTop: 0,
				searchName: null,
				// 物联设备
				facilityGroupList: [],
				// 气象设备
				dataList: [],
				// 可选择跳转页面数据
				nowselectviewindex: 0,
				selectviewlist: [{
						name: "农情检测",
						path: "/pages/instrumented-monitoring/environmental-data/environmental-data",
						imgurl: require('@/static/instrumented-monitoring/tab1.png'),
						imgurlnoselect: require('@/static/instrumented-monitoring/tab1-noselected.svg')
					},
					{
						name: "AI快速识别",
						path: "/pages/instrumented-monitoring/video-surveillance/video-surveillance",
						imgurl: require('@/static/instrumented-monitoring/tab2.png'),
						imgurlnoselect: require('@/static/instrumented-monitoring/tab2-noselected.svg')
					}
				],
				page: 1,
				size: 10,
				totalPages: 0,
				companyMask: '',
				rolesList: [
					{
						name: '用户订阅设备',
						id: 1
					},
					{
						name: '运营方设备',
						id: 2
					},
				],
				rolesName: '用户订阅设备',
				rolesStatus: 0
			}
		},
		onShow() {
			
		},
		mounted() {
			if(uni.getStorageSync('rolesStatus')) {
				this.rolesStatus = uni.getStorageSync('rolesStatus')
				this.rolesName = this.rolesList[this.rolesStatus].name
			}
			this.companyMask = uni.getStorageSync('companyMask')
			this.loadDataList()
			this.setcollapseheight()
		},
		beforeDestroy() {
			uni.setStorageSync('rolesStatus',0)
		},
		methods: {
			selectviewmet(i) {
				this.nowselectviewindex = i
			},
			onScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			clickChart(e) {
				let navparams = {
					deviceNo: e.deviceNo,
					deviceName: e.deviceName,
					deviceNos: e.deviceNos,
					facilityName: e.facilityName,
					cameraId: e.cameraInfo?.cameraId,
					cameraName: e.cameraInfo?.cameraName
				}
				let navurl = '/subPage1/socialized-service/agricultural-information/agricultural-detail/environmental-data'
				this.$togo(navurl, navparams)
			},
			queryMore() {
				this.page++
				if(this.page > this.totalPages) {
					uni.showToast({
						title: '暂无更多数据',
						icon: 'none'
					})
					return
				}
				this.loadDataList()
			},
			// 获取设施组数据
			loadDataList() {
				if(this.rolesStatus === 1) {
					let params = {
						page: this.page,
						size: this.size,
						condition: {
							axisX: uni.getStorageSync('lng'),
							axisY: uni.getStorageSync('lat'),
							deviceName: this.searchName,
							serviceProviderNo: uni.getStorageSync('serviceProviderNo'),
							companyMask: this.companyMask
						}
					}
					agriculturalApi.queryFGByFtNo(params).then(res => {
						let list = res.data.content
						this.totalPages = res.data.totalPages
						this.facilityGroupList = [...this.facilityGroupList,...list]
					})
					
					this.dataList = []
					agriculturalApi.queryAtmosphereAndWeather(this.companyMask).then(res => {
						let list = []
						if(res.code === 200) {
							res.data.map(el => {
								if (this.searchParam?.content) {
									if (el.deviceName && el.deviceName.indexOf(this.searchParam?.content) !== -1)
										list.push(el)
								} else {
									list.push(el)
								}
							})
						}
						this.dataList = list
					});
				} else {
					let params = {
						page: this.page,
						size: this.size,
						condition: {
							axisX: uni.getStorageSync('lng'),
							axisY: uni.getStorageSync('lat'),
							deviceName: this.searchName,
							serviceProviderNo: uni.getStorageSync('serviceProviderNo'),
						}
					}
					agriculturalApi.queryFGByFtNo0(params).then(res => {
						let list = res.data.content
						this.totalPages = res.data.totalPages
						this.facilityGroupList = [...this.facilityGroupList,...list]
					})
					
					this.dataList = []
					agriculturalApi.queryAtmosphereAndWeather0(uni.getStorageSync('serviceProviderNo')).then(res => {
						if(res.code === 200) {
							let list = []
							res.data.map(el => {
								if (this.searchParam?.content) {
									if (el.deviceName && el.deviceName.indexOf(this.searchParam?.content) !== -1)
										list.push(el)
								} else {
									list.push(el)
								}
							})
							this.dataList = list
						}
					});
				}
			},
			// 搜索
			goSearch() {
				this.searchParam = {
					content: this.searchName,
				}
				this.page = 1
				this.facilityGroupList = []
				this.loadDataList()
			},
			// 设置顶部高度
			// setmargintop() {
			// 	let top = 0
			// 	top = this.customBar + 10 + 40
			// 	return top
			// },
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(280)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(136)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10

				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			selectRoles(e) {
				this.facilityGroupList = []
				this.dataList = []
				this.rolesName = this.rolesList[e.detail.value].name
				this.rolesStatus = e.detail.value
				uni.setStorageSync('rolesStatus',this.rolesStatus)
				this.loadDataList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	// tab栏切换
	.tab {
		position: relative;
		z-index: 99;
		top: 0rpx;
		width: 100%;
		height: 160rpx;
		// background: linear-gradient(141deg, #88ACFF 0%, #2165FF 100%);

		.select-top-bar {
			width: 100%;
			height: 100%;

			.flex {
				display: flex;
				justify-content: center;
				align-items: center;

				.select-top-bar-item {
					display: inline-block;
					margin-top: 5rpx;
					margin-right: 20rpx;
					width: 162rpx;
					height: 150rpx;

					.top-bar-image {
						width: 100rpx;
						height: 100rpx;
						margin-left: 30rpx;

						// background-color: #FFFDEF;
						.top-bar-image-sty {
							width: 100rpx;
							height: 100rpx;
						}
					}

					.top-bar-item-title {
						width: 162rpx;
						height: 50rpx;
						// line-height: 50rpx;
						font-size: 30rpx;
						color: #fff;
						text-align: center;
					}
				}
			}

			.select-top-bar-item:last-child {
				margin-right: 0;
			}
		}
	}
	
	.tab1 {
		position: fixed;
		display: flex;
		align-items: center;
		// #ifdef APP-PLUS
		top: 89rpx;
		// #endif
		// #ifdef H5
		top: 22rpx;
		// #endif
		right: 60rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #fff;
		z-index: 999;
		.img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
	}
	
	.contain {
		width: 100%;
		line-height: 48rpx;
		position: relative;
		
		.bg {
			position: absolute;
			top: -164rpx;
			height: 280rpx;
			width: 100%;
			background: linear-gradient(to right, #88ACFF 0%, #2165FF 100%);
		}

		.contain-view {
			margin: 0 30rpx;
			position: relative;

			.searchs {
				position: relative;
				display: flex;
				padding-top: 16rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.search {
					width: 100%;
					height: 80rpx;
					border-radius: 60rpx;
					background-color: rgba(255, 255, 255, 1);
					border: 1px solid rgba(0, 0, 0, 0.05);
					box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;

					.testop {
						// width: 50%;
						width: 100%;
						color: #FFFFFF;
						height: 50rpx;
						// border-right: 4rpx #cccbce solid;
						margin-left: 5rpx;
						padding-right: 10rpx;
						font-size: 30rpx;

						&:last-child {
							border-right: none;
						}

						.buttime {
							color: #959497;
							height: 50rpx;
							white-space: nowrap;
							font-weight: 600;
							display: flex;
							justify-content: space-between;
							align-items: center;
							overflow: hidden;
						}

						.center {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;

							.textt {
								width: 190rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;
								margin-left: 10rpx;
							}
						}

						::v-deep .uni-date-x {
							padding: 0;
							width: 176rpx;

							.uni-date__x-input {
								padding: 0;
							}

							.icon-calendar {
								display: none;
							}
						}

						::v-deep .uni-date__icon-clear {
							top: 2rpx;
							right: -10rpx;

							.uniui-clear::before {
								font-size: 30rpx;
								color: rgb(192, 196, 204);
							}
						}
					}

					.searchbutton {
						width: 20%;
						background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
						border-radius: 40rpx;
						box-shadow: none;
						margin-left: 10rpx;
						font-size: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.btn {
					position: relative;
					z-index: 66;
					width: 130rpx;
					height: 64rpx;
					margin: 0 16rpx 0 8rpx;
					font-size: 30rpx;
					line-height: 64rpx;
					text-align: center;
					color: #FFFFFF;
					background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					opacity: 1;
				}
			}

			.agr-view {
				overflow: auto;

				.agr-title {
					margin-bottom: 10rpx;
					color: #757575;
					font-size: 30rpx;
				}
				
				.more {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #2165FF;
					line-height: 28rpx;
				}

				.agr-box {

					.agr-one {
						display: flex;
						height: 100rpx;
						background-color: #fff;
						padding: 20rpx;
						margin-bottom: 20rpx;
						height: fit-content;

						.right {
							font-size: 30rpx;
							width: 100%;

							.title {
								color: #a18859;
								border-bottom: 1px solid #ececec;
								padding-bottom: 10rpx;
								margin-bottom: 10rpx;

								.icon {
									height: 30rpx;
									vertical-align: middle;
									margin-right: 10rpx;
								}

								.title-txt {
									display: inline-block;
									vertical-align: middle;
								}
							}
							
							.address {
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
							}
						}
					}

					.fac-title-sty {
						padding-left: 20rpx;
						font-size: 30rpx;
						width: 300rpx;
						height: 70rpx;
						line-height: 70rpx;
						white-space: nowrap;
						// background-color: #00FFEE;
					}

					.uni-collapse-item__wrap-content {
						height: fit-content;
					}

					.facility-view-item {
						width: 95%;
						padding: 10rpx 0;
						margin-left: 5%;
						// padding-right: 2.5%;
						font-size: 12px;
						// line-height: 20px;
						border-radius: 20rpx;
						background-image: url(@/static/instrumented-monitoring/right.png);
						background-repeat: no-repeat;
						background-position: 92% 50%;
						background-size: 35rpx;
					}
				}
			}
		}
	}

	.noData {
		font-size: 30rpx;
		text-align: center;
		padding-bottom: 20rpx;
	}
	#bar {
		::v-deep .uni-navbar__header {
			box-shadow: none !important;
			background: linear-gradient(to right, #88ACFF 0%, #2165FF 100%) !important;
			color: #fff !important;
			border-bottom: 1px solid #e9eaee;
		
			.uni-nav-bar-text {
				color: #fff !important;
			}
		
			.uni-icons::before {
				color: #fff !important;
			}
		}
	}
	
</style>